<template>
	<view>
		<view class="login-container">
		  <view class="logo-container">
				<image :src="Config.API_HOST+'/imgs/lanqiao-logo.svg'" mode=""></image>
		  </view>
		  <view class="input-container">
			<input
			  type="text"
			  placeholder="请输入用户名"
			  v-model="username"
			  class="username-input"
			/>
		  </view>
		  <view class="input-container">
			<input
			  type="password"
			  placeholder="请输入密码"
			  v-model="password"
			  class="password-input"
			/>
		  </view>
		  <button @click="login" class="login-button">登录</button>
		  <view class="register-link">
			<text @click="goToRegister">立即注册</text>
		  </view>
		</view>
	</view>
  </template>
  
  <script setup>
  import { ref } from "vue";
import Config from "@/config.js";

const username = ref("");
const password = ref("");

const login = () => {
  // 用户名不能为空验证
  if (!username.value.trim()) {
    uni.showToast({
      title: '用户名不能为空',
      icon: "error"
    });
    return;
  }
  // 用户名不能为空验证
  if (!password.value.trim()) {
    uni.showToast({
      title: '密码不能为空',
      icon: "error"
    });
    return;
  }
  // 密码长度为6到9位验证
  const passwordRegex = /^.{6,9}$/;
  if (!passwordRegex.test(password.value)) {
    uni.showToast({
      title: '密码不正确',
      icon: "error"
    });
    return;
  }

  uni.request({
    url: `${Config.API_HOST}/login/?username=${username.value}`,
    method: "GET",
    success: (res) => {
      if (res.data.length > 0) {
        if (res.data[0].password === password.value) {
          uni.showToast({
            title: '登陆成功',
          });
          uni.setStorageSync('token',  JSON.stringify(res.data[0].token));
          uni.setStorageSync('content', JSON.stringify(res.data[0]));
          uni.reLaunch({
            url: "/pages/personal/index"
          });
        } else {
          uni.showToast({
            title: '密码错误',
            icon: "error"
          });
        }
      } else {
        uni.showToast({
          title: '用户名或密码错误',
          icon: "none"
        });
      }
    }
  });
};

const goToRegister = () => {
  uni.navigateTo({
    url: "/pages/register/index"
  });
};
  </script>
  
  
  
  <style scoped>
  .login-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	background-color: #fafafa;
	padding: 20px;
  }
  
  .logo-container {
	margin-bottom: 40px;
  }
  .logo-container image{
	  width: 150px;
	  height: 150px;
  }
  .logo {
	width: 80px;
	height: 80px;
  }
  
  .input-container {
	width: 100%;
	max-width: 350px;
	margin-bottom: 20px;
  }
  
  .username-input,
  .password-input {
	width: 90%;
	padding: 16px;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	font-size: 16px;
	margin-bottom: 10px;
  }
  
  .login-button {
	width: 100%;
	max-width: 350px;
	padding: 16px;
	border: none;
	border-radius: 8px;
	background-color: #007AFF;
	color: white;
	font-size: 18px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	transition: background-color 0.3s ease;
  }
  
  .login-button:hover {
	background-color: #005EA6;
  }
  
  .register-link {
	margin-top: 10px;
  }
  
  .register-link text {
	color: #999;
	text-decoration: underline;
	cursor: pointer;
  }
  </style>